<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1. 引入React相关的包 -->
    <!-- 提供React对象 -->
    <script src="../js/react.development.js"></script>
    <!-- 它依赖于React, 所以必须后引入 -->
    <script src="../js/react-dom.development.js"></script>
</head>
<body>
    <!-- 2. 在页面上创建一个空的div容器元素 -->
    <div id="root"></div>
    <script>
            /* 3. 创建一个React元素  不是DOM元素*/
    /* 
    React.createElement(
      type,  // 标签名 => h1
      [props], // 包含所有标签属性的对象   => {title: '你好, React!'}
      [...children] // n个子节点 => 'Hello React!'
    )
    */
   const element=React.createElement('h1',{title:'你好 世界'},'Hello World!')
   console.log(element);
   console.dir(document.getElementById('root'))

   /* 
    React元素
    1. 也称`虚拟 DOM` (virtual DOM) 或`虚拟节点`(virtual Node)
    2. 它就是一个普通的 JS 对象, 它不是真实 DOM 元素对象
      虚拟 DOM: 属性比较少  ==> `较轻`的对象
      真实 DOM: 属性特别多  ==> `较重`的对象

    3. 但它有一些自己的特点
      虚拟 DOM 可以转换为对应的真实 DOM  => ReactDOM.render方法将虚拟DOM转换为真实DOM再插入页面
      虚拟 DOM 对象包含了对应的真实 DOM 的关键信息属性
      ​    标签名 => type: "h1"
      ​    标签属性 => props: {title: '你好, React!'}
      ​    子节点 => props: {children: 'Hello React!'}
    */

    /* 4. 将React元素渲染到页面 
      1). 根据虚拟DOM创建真实DOM
      2). 将真实DOM插入到容器div中
    */
    /* 
    ReactDOM.render(
      element,  // 要渲染的React元素
      container // 页面中的容器DOM元素
    )
    */
    ReactDOM.render(element,document.getElementById('root'))
    </script>
    
</body>
</html>